본문으로 건너뛰기

브라우저 렌더링과정

작성일 : 2024.10.14

1. 브라우저 렌더링 순서 (Critical Rendering Path)​

먼저 서버로부터 HTML 문서를 전달받으면, 브라우저 엔진은 위에서 아래로 순차적으로 파싱하며 태그와 속성을 발견합니다. 이 태그와 속성들은 트리 형태로 변환되어 메모리에 저장되는데, 이를 DOM 트리라고 합니다. HTML 파싱 중 CSS 링크 또는 스타일 태그를 만나면, 이를 파싱하여 CSS Object model 트리로 변환합니다. 문서의 파싱이 완료되면, DOM과 CSSOM 트리를 결합하여 렌더 트리를 생성합니다. 렌더 트리는 브라우저 상에서 요소의 위치와 크기를 결정하는 리플로우 과정을 거치며, 마지막으로 요소의 색상, 경계선 등 시각적 요소를 그리는 페인팅 과정이 진행됩니다.

1.1 HTML 파싱 및 DOM 트리 생성​

  • 서버로부터 받은 HTML 문서를 파싱하여 DOM(Document Object Model) 트리를 생성
  • 토큰화(Tokenizing): HTML 문서를 개별 토큰으로 분해
  • 노드 생성(Node creation): 토큰을 노드로 변환
  • DOM 트리 구축: 노드들을 트리 구조로 구성
  • <html>, <body>, <div> 등의 요소들이 계층 구조로 구성됨

1.2 CSS 파싱 및 CSSOM 트리 생성​

  • HTML 파싱 중 CSS 관련 태그 발견 시 CSSOM(CSS Object Model) 생성
  • 외부 스타일시트(<link> 태그), 내부 스타일(<style> 태그), 인라인 스타일 모두 처리
  • CSS 선택자와 스타일 규칙을 트리 구조로 변환
  • 스타일 상속과 캐스케이딩 규칙 적용
  • 브라우저 기본 스타일(User Agent Stylesheet)도 포함

1.3 렌더 트리(Render Tree) 구성​

  • DOM 트리와 CSSOM 트리를 결합하여 렌더 트리 생성
  • 화면에 실제로 표시될 요소만 포함 (display: none 제외)
  • 시각적 속성이 계산된 상태로 구성
  • visibility: hidden은 렌더 트리에 포함됨 (공간 차지)

1.4 레이아웃(Layout)/리플로우(Reflow)​

  • 렌더 트리의 각 노드가 화면의 정확한 위치와 크기를 계산
  • 뷰포트 크기, 디바이스 특성 고려
  • 반응형 웹을 위한 미디어 쿼리 적용
  • 상대적 측정값(%, em, rem 등)을 절대적 픽셀 값으로 변환

1.5 페인트(Paint)​

  • 계산된 레이아웃을 실제 화면에 픽셀로 변환
  • 텍스트, 색상, 이미지, 경계선, 그림자 등 모든 시각적 요소를 그림
  • 레이어 합성(Compositing) 수행
  • GPU 가속이 필요한 작업 처리

HTML 파싱 중간에 script 태그를 만나면 어떻게 되나요?​

파싱 중간에 script 태그를 만나면, 브라우저는 해당 스크립트를 로드하고 실행하기 위해 파싱을 일시 중단합니다. 외부 스크립트의 경우, 스크립트를 로드하고 실행한 후 파싱을 재개하며, 내부 스크립트의 경우, 실행이 완료될 때까지 파싱이 중단됩니다. 이로 인해 파싱 속도가 저하되고, DOM 트리가 완성되기 전에 스크립트가 DOM을 조작할 가능성이 있어, 예기치 못한 상황이 발생할 수 있습니다. 이러한 문제를 방지하기 위해 async나 defer 속성을 사용하여 파싱에 미치는 영향을 최소화할 수 있습니다.

async와 defer 속성에 대해 설명해주세요​

async와 defer는 스크립트를 비동기적으로 로드하는 속성입니다. 이들은 HTML 파싱이 중단되는 현상과 DOM 트리가 완성되기 전에 스크립트가 실행되는 것을 방지하기 위해 사용됩니다. async 속성은 스크립트가 로드되는 즉시 실행하는 반면, defer 속성은 스크립트를 비동기적으로 로드하되, HTML 파싱이 완료된 후 스크립트를 실행합니다. 따라서 async는 스크립트 로드 순서 상관없이 실행되는 경우에 적합하고, defer는 스크립트의 실행 순서가 중요할 때 적합합니다.